import React, { Component } from 'react';
// import './style/index.css'

class Kdemo extends Component {
    dateFormat(timestamp, format) {
        // :ss
        format = format == null ? 'yyyy.MM.dd hh:mm:ss' : format
        const date = new Date(timestamp)
        const o = {
            'M+': date.getMonth() + 1, // month
            'd+': date.getDate(), // day
            'h+': date.getHours(), // hour
            'm+': date.getMinutes(), // minute
            's+': date.getSeconds(), // second
            'q+': Math.floor((date.getMonth() + 3) / 3), // quarter
            S: date.getMilliseconds() // millisecond
        }
        const week = [
            '星期日',
            '星期一',
            '星期二',
            '星期三',
            '星期四',
            '星期五',
            '星期六'
        ]
        if (/(y+)/.test(format)) {
            format = format.replace(
                RegExp.$1,
                (date.getFullYear() + '').substr(4 - RegExp.$1.length)
            )
        }
        if (/(w+)/.test(format)) {
            format = format.replace(RegExp.$1, week[date.getDay()])
        }
        for (const k in o) {
            if (new RegExp('(' + k + ')').test(format)) {
                format = format.replace(
                    RegExp.$1,
                    RegExp.$1.length === 1 ?
                        o[k] :
                        ('00' + o[k]).substr(('' + o[k]).length)
                )
            }
        }
        return format
    }
    componentDidMount() {
        var dom = document.getElementById("mountNode");
        // eslint-disable-next-line no-undef
        var myChart = echarts.init(dom);
        var app = {};
        // eslint-disable-next-line no-undef
        var option = null;
        var upColor = '#00da3c';
        var downColor = '#ec0000';


        function splitData(rawData) {
            var categoryData = [];
            var values = [];
            var volumes = [];
            for (var i = 0; i < rawData.length; i++) {
                categoryData.push(rawData[i].splice(0, 1)[0]);
                values.push(rawData[i]);
                volumes.push([i, rawData[i][4], rawData[i][0] > rawData[i][1] ? 1 : -1]);
            }

            return {
                categoryData: categoryData,
                values: values,
                volumes: volumes
            };
        }

        function calculateMA(dayCount, data) {
            var result = [];
            for (var i = 0, len = data.values.length; i < len; i++) {
                if (i < dayCount) {
                    result.push('-');
                    continue;
                }
                var sum = 0;
                for (var j = 0; j < dayCount; j++) {
                    sum += data.values[i - j][1];
                }
                result.push(+(sum / dayCount).toFixed(3));
            }
            return result;
        }

        // $.get('ROOT_PATH' + 'data/asset/data/stock-DJI.json', function (rawData) {
        var rawData = [
            [20200513093000, 1033, 4247741, 411703, 0, 0],
            [20200513093100, 1032, 1528169, 148000, 0, 0],
            [20200513093200, 1031, 1197741, 116100, 0, 0],
            [20200513093300, 1031, 3349325, 324897, 0, 0],
            [20200513093400, 1032, 692008, 67075, 0, 0],
            [20200513093500, 1031, 1035505, 100400, 0, 0],
            [20200513093600, 1031, 1081268, 104872, 0, 0],
            [20200513093700, 1031, 492861, 47800, 0, 0],
            [20200513093800, 1032, 1692899, 164100, 0, 0],
            [20200513093900, 1032, 357155, 34600, 0, 0],
            [20200513094000, 1033, 558650, 54100, 0, 0],
            [20200513094100, 1031, 964730, 93500, 0, 0],
            [20200513094200, 1031, 2704655, 262453, 0, 0],
            [20200513094300, 1031, 1020303, 98970, 0, 0],
            [20200513094400, 1031, 1642932, 159300, 0, 0],
            [20200513094500, 1030, 1655351, 160600, 0, 0],
            [20200513094600, 1030, 1078228, 104600, 0, 0],
            [20200513094700, 1030, 913430, 88600, 0, 0],
            [20200513094800, 1030, 472159, 45800, 0, 0],
            [20200513094900, 1031, 947806, 91917, 0, 0],
            [20200513095000, 1032, 810362, 78600, 0, 0],
            [20200513095100, 1031, 1430003, 138800, 0, 0],
            [20200513095200, 1031, 456211, 44280, 0, 0],
            [20200513095300, 1030, 1480560, 143700, 0, 0],
            [20200513095400, 1031, 1922076, 186500, 0, 0],
            [20200513095500, 1030, 2318707, 225100, 0, 0],
            [20200513095600, 1031, 2995423, 290800, 0, 0],
            [20200513095700, 1030, 759196, 73700, 0, 0],
            [20200513095800, 1031, 729547, 70800, 0, 0],
            [20200513095900, 1031, 936369, 90900, 0, 0],
            [20200513100000, 1029, 2046794, 198750, 0, 0],
            [20200513100100, 1030, 968555, 94050, 0, 0],
            [20200513100200, 1030, 411963, 40000, 0, 0],
            [20200513100300, 1030, 440111, 42700, 0, 0],
            [20200513100400, 1030, 1348131, 130900, 0, 0],
            [20200513100500, 1031, 335884, 32600, 0, 0],
            [20200513100600, 1031, 217462, 21100, 0, 0],
            [20200513100700, 1031, 200984, 19500, 0, 0],
            [20200513100800, 1031, 525411, 51000, 0, 0],
            [20200513100900, 1030, 1887478, 183248, 0, 0],
            [20200513101000, 1030, 384193, 37300, 0, 0],
            [20200513101100, 1030, 345055, 33500, 0, 0],
            [20200513101200, 1031, 817242, 79300, 0, 0],
            [20200513101300, 1030, 961357, 93352, 0, 0],
            [20200513101400, 1030, 359922, 34943, 0, 0],
            [20200513101500, 1029, 497305, 48300, 0, 0],
            [20200513101600, 1029, 240885, 23400, 0, 0],
            [20200513101700, 1030, 756410, 73500, 0, 0],
            [20200513101800, 1030, 165746, 16100, 0, 0],
            [20200513101900, 1030, 116332, 11300, 0, 0],
            [20200513102000, 1030, 508396, 49400, 0, 0],
            [20200513102100, 1030, 123526, 12000, 0, 0],
            [20200513102200, 1030, 279942, 27200, 0, 0],
            [20200513102300, 1029, 1614756, 156900, 0, 0],
            [20200513102400, 1030, 116343, 11300, 0, 0],
            [20200513102500, 1030, 169947, 16500, 0, 0],
            [20200513102600, 1029, 267967, 26027, 0, 0],
            [20200513102700, 1029, 2442526, 237356, 0, 0],
            [20200513102800, 1029, 989747, 96189, 0, 0],
            [20200513102900, 1029, 162617, 15800, 0, 0],
            [20200513103000, 1029, 715214, 69503, 0, 0],
            [20200513103100, 1030, 388959, 37792, 0, 0],
            [20200513103200, 1029, 272618, 26479, 0, 0],
            [20200513103300, 1029, 1617448, 157207, 0, 0],
            [20200513103400, 1030, 158599, 15400, 0, 0],
            [20200513103500, 1030, 348061, 33800, 0, 0],
            [20200513103600, 1030, 268819, 26105, 0, 0],
            [20200513103700, 1030, 859428, 83400, 0, 0],
            [20200513103800, 1029, 480947, 46705, 0, 0],
            [20200513103900, 1029, 90592, 8800, 0, 0],
            [20200513104000, 1030, 274282, 26639, 0, 0],
            [20200513104100, 1030, 308475, 29953, 0, 0],
            [20200513104200, 1031, 134001, 13000, 0, 0],
            [20200513104300, 1030, 97191, 9429, 0, 0],
            [20200513104400, 1030, 364549, 35372, 0, 0],
            [20200513104500, 1030, 1023286, 99318, 0, 0],
            [20200513104600, 1030, 685891, 66577, 0, 0],
            [20200513104700, 1030, 670559, 65051, 0, 0],
            [20200513104800, 1030, 1158105, 112440, 0, 0],
            [20200513104900, 1030, 196652, 19100, 0, 0],
            [20200513105000, 1031, 254527, 24700, 0, 0],
            [20200513105100, 1030, 10301, 1000, 0, 0],
            [20200513105200, 1030, 67251, 6526, 0, 0],
            [20200513105300, 1030, 180054, 17479, 0, 0],
            [20200513105400, 1030, 355033, 34469, 0, 0],
            [20200513105500, 1030, 474861, 46103, 0, 0],
            [20200513105600, 1030, 303849, 29500, 0, 0],
            [20200513105700, 1030, 165616, 16074, 0, 0],
            [20200513105800, 1030, 155625, 15100, 0, 0],
            [20200513105900, 1030, 1069340, 103883, 0, 0],
            [20200513110000, 1029, 202999, 19725, 0, 0],
            [20200513110100, 1029, 2555612, 248280, 0, 0],
            [20200513110200, 1030, 269428, 26163, 0, 0],
            [20200513110300, 1030, 322275, 31318, 0, 0],
            [20200513110400, 1029, 417358, 40549, 0, 0],
            [20200513110500, 1030, 224568, 21818, 0, 0],
            [20200513110600, 1030, 431375, 41903, 0, 0],
            [20200513110700, 1029, 411453, 39950, 0, 0],
            [20200513110800, 1029, 165869, 16107, 0, 0],
            [20200513110900, 1030, 110808, 10763, 0, 0],
            [20200513111000, 1029, 359660, 34933, 0, 0],
            [20200513111100, 1029, 415582, 40359, 0, 0],
            [20200513111200, 1030, 1456422, 141500, 0, 0],
            [20200513111300, 1030, 295534, 28700, 0, 0],
            [20200513111400, 1029, 224301, 21782, 0, 0],
            [20200513111500, 1029, 261652, 25418, 0, 0],
            [20200513111600, 1030, 382431, 37145, 0, 0],
            [20200513111700, 1030, 3302609, 320400, 0, 0],
            [20200513111800, 1030, 210120, 20400, 0, 0],
            [20200513111900, 1030, 172010, 16700, 0, 0],
            [20200513112000, 1031, 244709, 23758, 0, 0],
            [20200513112100, 1030, 111649, 10839, 0, 0],
            [20200513112200, 1030, 567844, 55082, 0, 0],
            [20200513112300, 1030, 107419, 10429, 0, 0],
            [20200513112400, 1031, 206143, 20000, 0, 0],
            [20200513112500, 1030, 417514, 40539, 0, 0],
            [20200513112600, 1030, 212289, 20600, 0, 0],
            [20200513112700, 1030, 149572, 14517, 0, 0],
            [20200513112800, 1030, 56072, 5443, 0, 0],
            [20200513112900, 1030, 157951, 15325, 0, 0],
            [20200513130000, 1031, 1451720, 140824, 0, 0],
            [20200513130100, 1031, 171200, 16608, 0, 0],
            [20200513130200, 1031, 897767, 87082, 0, 0],
            [20200513130300, 1031, 1111410, 107800, 0, 0],
            [20200513130400, 1032, 799543, 77500, 0, 0],
            [20200513130500, 1031, 275553, 26720, 0, 0],
            [20200513130600, 1031, 24508, 2377, 0, 0],
            [20200513130700, 1031, 235861, 22873, 0, 0],
            [20200513130800, 1031, 247946, 24047, 0, 0],
            [20200513130900, 1030, 1020410, 98974, 0, 0],
            [20200513131000, 1031, 599171, 58116, 0, 0],
            [20200513131100, 1031, 124848, 12100, 0, 0],
            [20200513131200, 1031, 269767, 26162, 0, 0],
            [20200513131300, 1031, 474777, 46048, 0, 0],
            [20200513131400, 1031, 395090, 38321, 0, 0],
            [20200513131500, 1031, 207983, 20172, 0, 0],
            [20200513131600, 1031, 180272, 17484, 0, 0],
            [20200513131700, 1031, 250944, 24331, 0, 0],
            [20200513131800, 1032, 359270, 34839, 0, 0],
            [20200513131900, 1031, 408573, 39619, 0, 0],
            [20200513132000, 1033, 963901, 93380, 0, 0],
            [20200513132100, 1032, 424274, 41102, 0, 0],
            [20200513132200, 1032, 1078038, 104518, 0, 0],
            [20200513132300, 1032, 254702, 24700, 0, 0],
            [20200513132400, 1032, 764673, 74100, 0, 0],
            [20200513132500, 1032, 1050895, 101782, 0, 0],
            [20200513132600, 1031, 1149552, 111400, 0, 0],
            [20200513132700, 1031, 236134, 22900, 0, 0],
            [20200513132800, 1032, 333078, 32291, 0, 0],
            [20200513132900, 1032, 792878, 76900, 0, 0],
            [20200513133000, 1032, 655278, 63500, 0, 0],
            [20200513133100, 1031, 196074, 19000, 0, 0],
            [20200513133200, 1032, 247746, 24000, 0, 0],
            [20200513133300, 1032, 263075, 25500, 0, 0],
            [20200513133400, 1032, 230067, 22300, 0, 0],
            [20200513133500, 1032, 408674, 39600, 0, 0],
            [20200513133600, 1032, 190901, 18500, 0, 0],
            [20200513133700, 1033, 72290, 7000, 0, 0],
            [20200513133800, 1032, 173463, 16800, 0, 0],
            [20200513133900, 1032, 90073, 8728, 0, 0],
            [20200513134000, 1033, 1032310, 99990, 0, 0],
            [20200513134100, 1034, 159225, 15400, 0, 0],
            [20200513134200, 1033, 67151, 6500, 0, 0],
            [20200513134300, 1032, 1157387, 112055, 0, 0],
            [20200513134400, 1032, 296860, 28752, 0, 0],
            [20200513134500, 1033, 26987, 2614, 0, 0],
            [20200513134600, 1033, 386283, 37400, 0, 0],
            [20200513134700, 1033, 19627, 1900, 0, 0],
            [20200513134800, 1032, 205404, 19900, 0, 0],
            [20200513134900, 1032, 212857, 20621, 0, 0],
            [20200513135000, 1032, 270648, 26224, 0, 0],
            [20200513135100, 1032, 142406, 13800, 0, 0],
            [20200513135200, 1031, 206279, 19998, 0, 0],
            [20200513135300, 1032, 64721, 6276, 0, 0],
            [20200513135400, 1032, 1058850, 102600, 0, 0],
            [20200513135500, 1032, 205406, 19900, 0, 0],
            [20200513135600, 1033, 60917, 5900, 0, 0],
            [20200513135700, 1032, 127735, 12375, 0, 0],
            [20200513135800, 1032, 741271, 71764, 0, 0],
            [20200513135900, 1032, 187266, 18135, 0, 0],
            [20200513140000, 1032, 63569, 6158, 0, 0],
            [20200513140100, 1032, 184290, 17852, 0, 0],
            [20200513140200, 1034, 2265748, 219300, 0, 0],
            [20200513140300, 1034, 268840, 26000, 0, 0],
            [20200513140400, 1034, 819231, 79300, 0, 0],
            [20200513140500, 1034, 1696439, 164034, 0, 0],
            [20200513140600, 1035, 737936, 71300, 0, 0],
            [20200513140700, 1035, 205923, 19900, 0, 0],
            [20200513140800, 1036, 1151297, 111200, 0, 0],
            [20200513140900, 1035, 331634, 32043, 0, 0],
            [20200513141000, 1036, 541805, 52330, 0, 0],
            [20200513141100, 1037, 969722, 93600, 0, 0],
            [20200513141200, 1037, 2024666, 195200, 0, 0],
            [20200513141300, 1037, 1428299, 137700, 0, 0],
            [20200513141400, 1037, 2319884, 223500, 0, 0],
            [20200513141500, 1038, 178536, 17200, 0, 0],
            [20200513141600, 1038, 686074, 66100, 0, 0],
            [20200513141700, 1037, 35277, 3400, 0, 0],
            [20200513141800, 1037, 143243, 13800, 0, 0],
            [20200513141900, 1037, 856609, 82600, 0, 0],
            [20200513142000, 1038, 382430, 36847, 0, 0],
            [20200513142100, 1038, 1490221, 143572, 0, 0],
            [20200513142200, 1038, 2561776, 246800, 0, 0],
            [20200513142300, 1039, 388197, 37400, 0, 0],
            [20200513142400, 1038, 443326, 42700, 0, 0],
            [20200513142500, 1039, 948734, 91388, 0, 0],
            [20200513142600, 1038, 261725, 25200, 0, 0],
            [20200513142700, 1037, 180871, 17433, 0, 0],
            [20200513142800, 1037, 174028, 16778, 0, 0],
            [20200513142900, 1037, 636185, 61299, 0, 0],
            [20200513143000, 1038, 1401380, 135000, 0, 0],
            [20200513143100, 1037, 368412, 35500, 0, 0],
            [20200513143200, 1038, 430625, 41500, 0, 0],
            [20200513143300, 1038, 282169, 27200, 0, 0],
            [20200513143400, 1038, 631974, 60900, 0, 0],
            [20200513143500, 1038, 645531, 62200, 0, 0],
            [20200513143600, 1037, 905696, 87300, 0, 0],
            [20200513143700, 1037, 980864, 94515, 0, 0],
            [20200513143800, 1036, 827413, 79827, 0, 0],
            [20200513143900, 1036, 243576, 23500, 0, 0],
            [20200513144000, 1035, 521475, 50341, 0, 0],
            [20200513144100, 1035, 481645, 46500, 0, 0],
            [20200513144200, 1036, 432159, 41717, 0, 0],
            [20200513144300, 1035, 904793, 87400, 0, 0],
            [20200513144400, 1035, 338718, 32709, 0, 0],
            [20200513144500, 1036, 1554591, 150043, 0, 0],
            [20200513144600, 1036, 187591, 18100, 0, 0],
            [20200513144700, 1037, 798215, 77025, 0, 0],
            [20200513144800, 1036, 551738, 53259, 0, 0],
            [20200513144900, 1035, 1655508, 159900, 0, 0],
            [20200513145000, 1035, 673402, 65027, 0, 0],
            [20200513145100, 1036, 305908, 29530, 0, 0],
            [20200513145200, 1036, 455785, 44000, 0, 0],
            [20200513145300, 1035, 325388, 31400, 0, 0],
            [20200513145400, 1035, 312234, 30143, 0, 0],
            [20200513145500, 1035, 825624, 79707, 0, 0],
            [20200513145600, 1036, 556850, 53700, 0, 0],
            [20200583145900, 1038, 4348182, 418900, 0, 0]
        ];
        rawData.map(item => {
            item[0] = this.dateFormat(item[0], 'hh:mm:ss')
            return item
        })
        console.log(rawData)
        var data = splitData(rawData);
        // eslint-disable-next-line no-undef
        myChart.setOption(option = {
            backgroundColor: '#fff',
            animation: false,
            // legend: {
            //     bottom: 10,
            //     left: 'center',
            //     data: ['MA5']
            // },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross'
                },
                backgroundColor: '#FF1812',
                borderWidth: 1,
                borderColor: '#fff',
                padding: 10,
                textStyle: {
                    color: '#fff'
                },
                // position: function (pos, params, el, elRect, size) {
                //     var obj = { top: 10 };
                //     obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 30;
                //     return obj;
                // },
                formatter: function (param) {
                    param = param[0];
                    return [
                        param.value
                    ].join('');
                }
            },
            // axisPointer: {
            //     label: {
            //         backgroundColor: '#777'
            //     }
            // },
            // toolbox: {

            // },
            // brush: {
            //     // xAxisIndex: 'all',
            //     // brushLink: 'all',
            //     outOfBrush: {
            //         colorAlpha: 0.5
            //     }
            // },
            // visualMap: {
            //     show: false,
            //     seriesIndex: 5,
            //     dimension: 2,
            //     pieces: [{
            //         value: 1,
            //         color: downColor
            //     }, {
            //         value: -1,
            //         color: upColor
            //     }]
            // },
            grid: [
                {
                    top: '10%',
                    left: '18%',
                    right: '5%',
                    height: '50%'
                },
                {
                    left: '1%',
                    right: '0%',
                    top: '0%',
                    height: '50%'
                }
            ],
            xAxis: [
                {
                    type: 'category',
                    data: data.categoryData,
                    scale: true,
                    boundaryGap: true,
                    // axisLine: {onZero: false},
                    axisTick: { show: false },
                    axisLabel: {
                        show: true,
                        textStyle: {
                            color: "#666", //更改坐标轴文字颜色
                            fontSize: 12 //更改坐标轴文字大小
                        }
                    },
                    splitLine: { show: true },
                    axisLine: {
                        //X轴
                        show: false,
                        onZero: false
                    },
                    // axisLabel: { show: false },
                    splitNumber: 20,
                    min: 'dataMin',
                    max: 'dataMax',
                    axisPointer: {
                        z: 100
                    }
                },
                {
                    type: 'category',
                    gridIndex: 1,
                    data: '',
                    scale: true,
                    boundaryGap: false,
                    axisLine: {
                        //X轴
                        show: false,
                        onZero: false
                    },
                    axisTick: { show: false },
                    splitLine: { show: false },
                    splitNumber: 20,
                    min: 'dataMin',
                    max: 'dataMax'
                },
            ],
            yAxis: [
                {
                    scale: true,
                    splitArea: {
                        show: true
                    },
                    // position: 'left',
                    axisTick: {       //y轴刻度线
                        "show": false
                    },
                    axisLine: {
                        lineStyle: {
                            color: '#ccc',
                            width: 1,//这里是为了突出显示加上的  
                        }
                    },
                    axisLabel: {
                        formatter: '{value}',
                        textStyle: { //改变刻度字体样式
                            color: '#666'
                        }
                    }
                },
                {
                    scale: true,
                    gridIndex: 1,
                    splitNumber: 2,
                    axisLabel: { show: false },
                    axisLine: { show: false },
                    axisTick: { show: false },
                    splitLine: { show: false }
                }
                // {
                //     scale: true,

                //     splitArea: {
                //         show: true
                //     }
                // },
                // {
                //     scale: true,
                //     gridIndex: 1,
                //     splitNumber: 2,
                //     axisLabel: { show: false },
                //     axisLine: { show: false },
                //     axisTick: { show: false },
                //     splitLine: { show: false }
                // }
            ],
            dataZoom: [
                {
                    type: 'inside',
                    xAxisIndex: [0, 1],
                    start: 94,
                    end: 100
                },
                {
                    show: false,
                    xAxisIndex: [0, 1],
                    type: 'slider',
                    top: '85%',
                    start: 94,
                    end: 100
                }
            ],

            series: [
                {
                    name: 'Dow-Jones index',
                    type: 'line',
                    data: data.values[0],
                    markPoint: {
                        label: {
                            normal: {
                                formatter: function (param) {
                                    return param != null ? Math.round(param.value) : '';
                                }
                            }
                        },
                        data: [
                            {
                                name: 'XX标点',
                                coord: ['13:39:05', 495176.2],
                                value: 495176.2,
                                itemStyle: {
                                    color: '#FC5656'
                                }
                            },
                            // {
                            //     name: 'highest value',
                            //     type: 'max',
                            //     valueDim: 'highest'
                            // },
                            // {
                            //     name: 'lowest value',
                            //     type: 'min',
                            //     valueDim: 'lowest'
                            // },
                            // {
                            //     name: 'average value on close',
                            //     type: 'average',
                            //     valueDim: 'close'
                            // }
                        ],
                        tooltip: {
                            formatter: function (param) {
                                return param.name + '<br>' + (param.data.coord || '');
                            }
                        }
                    },

                },
                {
                    name: 'MA5',
                    type: 'line',
                    data: calculateMA(5, data),
                    smooth: true,

                    areaStyle: {
                        normal: {
                            // eslint-disable-next-line no-undef
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                { offset: 0, color: "#FC5656" },
                                // { offset: 0.48, color: "#FC5656" },
                                // { offset: 0.78, color: "#FC5656" },
                                { offset: 0.80, color: "#fff" },
                                { offset: 1, color: "#fff" }
                            ])
                        }
                    }, //填充区域
                    lineStyle: {
                        color: "#FF1812"
                    },
                    // itemStyle: {
                    //     color: "#FF1812"
                    // },

                },



                // {
                //     name: 'Volume',
                //     type: 'bar',
                //     xAxisIndex: 1,
                //     yAxisIndex: 1,
                //     data: data.volumes
                // }
            ]
        }, true);

        myChart.dispatchAction({
            type: 'brush',
            areas: [
                {
                    brushType: 'lineX',
                    coordRange: ['13:38:13', '13:39:05'],
                    xAxisIndex: 0
                }
            ]
        });





    }
    onClick = () => {
        this.props.onClick && this.props.onClick()
    }
    render() {
        let { title, rightText, showArrow } = this.props;
        return (
            <div className='Kcontent' >
                <div className="chart-wrapper">
                    <div className="chart-container">
                        <div className="chart-container">
                            <div id="mountNode" style={{ width: '100%', height: '300px', background: '#fff' }}></div>
                        </div>
                    </div>
                </div>
            </div>
        )
    }
}

export default Kdemo;